<template>
<div  class="house-main" @click="toHouseDetail">
  <div class="left">
    <van-image
  width="7rem"
  height="7rem"
  fit="cover"
  :src="house.image"
  @error="imgError"
  ref="img"
/>
  </div>
  <div class="right">
    <h4 class="title">{{house.title}}</h4>
    <div class="content">{{house.desc}}</div>
    <h5>优惠价:<span>{{house.price||'99999'}}元</span></h5>
  </div>
</div>
</template>

<script>
export default {
  name: 'HouseHouseItem',
  props: {
    house: {
      required: true,
      type: Object
    }
  },
  data () {
    return {

    }
  },

  mounted () {

  },

  methods: {
    imgError () {
      this.$refs.img.src = 'https://img2.baidu.com/it/u=3958470329,3627034584&fm=253&fmt=auto&app=138&f=JPEG?w=525&h=350'
    },
    toHouseDetail () {
      // console.log('房产详情')
      this.$router.push({
        name: 'houseDetail',
        params: {
          id: this.house.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .house-main{
    display: flex;
    height: 112px;
    margin-bottom: 10px;
    margin-left: 10px;
    .right{
      margin-left: 10px;
     flex: 1;
     display: flex;
     flex-direction: column;
     h4,h5{
      margin: 0;
     }
     .content{
      margin: 5px 0;
     };
     h5 span{
      color: red;
     }
     .content{
        overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;//3表示行数，看自己需求设置超出多少行后出现...
  -webkit-box-orient: vertical;
     }
    }
  }
</style>
